<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import JiBenSheZhi from '../subchildrens/JiBenSheZhi.vue';
import DengLuPeiZhi from '../subchildrens/DengLuPeiZhi.vue';
import ZhiBoPeiZhi from '../subchildrens/ZhiBoPeiZhi.vue';
import TiXianPeiZhi from '../subchildrens/TiXianPeiZhi.vue';
import TuiSongPeiZhi from '../subchildrens/TuiSongPeiZhi.vue';
import ZhiFuPeiZhi from '../subchildrens/ZhiFuSheZhi.vue';
import YaoQingJiangLi from '../subchildrens/YaoQingJiangLi.vue';
import TongJiPeiZhi from '../subchildrens/TongJiPeiZhi.vue';
import ShiPinPeiZhi from '../subchildrens/ShiPinPeiZhi.vue';
import DongTaiPeiZhi from '../subchildrens/DongTaiPeiZhi.vue';
import YouXiPeiZhi from '../subchildrens/YouXiPeiZhi.vue';
import WuLiuPeiZhi from '../subchildrens/WuLiuPeiZhi.vue';
import QuanZiPeiZhi from '../subchildrens/QuanZiPeiZhi.vue';
import ShangPingPeiZhi from '../subchildrens/ShangPingPeiZhi.vue';


const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>

<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本设置" name="first">
            <JiBenSheZhi />
        </el-tab-pane>
        <el-tab-pane label="登录配置" name="second">
            <DengLuPeiZhi />
        </el-tab-pane>
        <el-tab-pane label="直播配置" name="third">
            <ZhiBoPeiZhi />
        </el-tab-pane>
        <el-tab-pane label="提现配置" name="fourth">
            <TiXianPeiZhi />
        </el-tab-pane>
        <el-tab-pane label="推送配置" name="fivth">
            <TuiSongPeiZhi />
        </el-tab-pane>
        <el-tab-pane label="支付设置" name="sixth">
            <ZhiFuPeiZhi />
        </el-tab-pane>
        <el-tab-pane label="邀请奖励" name="seventh">
            <YaoQingJiangLi />
        </el-tab-pane>
        <el-tab-pane label="统计配置" name="eighth">
            <TongJiPeiZhi />
        </el-tab-pane>
        <el-tab-pane label="视频配置" name="ninth">
            <ShiPinPeiZhi />
        </el-tab-pane>
        <el-tab-pane label="商品配置" name="tenth">
            <ShangPingPeiZhi />
        </el-tab-pane>
        <el-tab-pane label="动态配置" name="eleventh">
            <DongTaiPeiZhi />
        </el-tab-pane>
        <el-tab-pane label="游戏配置" name="twelfth">
            <YouXiPeiZhi />
        </el-tab-pane>
        <el-tab-pane label="物流配置" name="thirteenth">
            <WuLiuPeiZhi />
        </el-tab-pane>
        <el-tab-pane label="圈子配置" name="fourteenth">
            <QuanZiPeiZhi />
        </el-tab-pane>

    </el-tabs>
</template>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #000;
    font-size: 16px;
    font-weight: 600;
}
.el-tab-pane>.label{
    font-size: 50px;
}
:root{
    --el-font-size-base: 16px;
}
</style>